import React, {Component} from 'react';
import './AppLayout.css'

import {Layout} from 'antd';
import {MenuFoldOutlined, MenuUnfoldOutlined,} from '@ant-design/icons';
import {LeftBar} from "./LeftBar";

const { Header, Content } = Layout;

class AppLayout extends Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    render() {
        return (
      <Layout>
          <LeftBar collapsed={this.state.collapsed}/>
          <Layout className="site-layout">
              <Header className="site-layout-background" style={{padding: 0}}>
                  {this.state.collapsed ? <MenuUnfoldOutlined className='trigger' onClick={this.toggle}/> :
                      <MenuFoldOutlined className='trigger' onClick={this.toggle}/>}
              </Header>
              <Content
                  className="site-layout-background"
              >
                  {this.props.children}
              </Content>
          </Layout>
      </Layout>
        );
    }
}

export default AppLayout;

